<template>
  <view class="container">
    <!-- 页面标题 -->
  <!--  <view class="page-header">
      <view class="back-btn" @click="onBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="page-title">费用明细</view>
    </view> -->
    
    <!-- 总金额卡片 -->
    <view class="total-amount-card">
      <view class="total-label">总金额</view>
      <view class="total-value">¥{{ totalAmount.toFixed(2) }}</view>
      <view class="total-desc">点击下方明细可展开查看详情</view>
    </view>
    
    <!-- 明细列表 -->
    <view class="detail-list">
      <!-- 租金项 -->
      <view class="detail-item" @click="toggleExpand('rent')">
        <view class="item-header">
          <view class="item-title">
            <uni-icons type="home-filled" size="18" color="#42b983" class="item-icon"></uni-icons>
            租金
          </view>
          <view class="item-amount">¥{{ rentTotal.toFixed(2) }}</view>
          <uni-icons 
            :type="expanded.rent ? 'top' : 'bottom'" 
            size="16" 
            color="#999"
            class="expand-icon"
          ></uni-icons>
        </view>
        
        <!-- 租金子列表 - 展开/收起动画 -->
        <view 
          class="sub-list" 
          :style="{ 
            maxHeight: expanded.rent ? subListHeight : '0',
            opacity: expanded.rent ? 1 : 0,
            paddingTop: expanded.rent ? '16rpx' : '0',
            paddingBottom: expanded.rent ? '16rpx' : '0'
          }"
        >
          <view class="sub-item" v-for="(item, index) in rentDetails" :key="index">
            <view class="sub-item-label">{{ item.label }}</view>
            <view class="sub-item-value">¥{{ item.amount.toFixed(2) }}</view>
          </view>
        </view>
      </view>
      
      <!-- 押金项 -->
      <view class="detail-item" @click="toggleExpand('deposit')">
        <view class="item-header">
          <view class="item-title">
            <uni-icons type="lock-filled" size="18" color="#2196f3" class="item-icon"></uni-icons>
            押金
          </view>
          <view class="item-amount">¥{{ depositTotal.toFixed(2) }}</view>
          <uni-icons 
            :type="expanded.deposit ? 'top' : 'bottom'" 
            size="16" 
            color="#999"
            class="expand-icon"
          ></uni-icons>
        </view>
        
        <!-- 押金子列表 - 展开/收起动画 -->
        <view 
          class="sub-list" 
          :style="{ 
            maxHeight: expanded.deposit ? subListHeight : '0',
            opacity: expanded.deposit ? 1 : 0,
            paddingTop: expanded.deposit ? '16rpx' : '0',
            paddingBottom: expanded.deposit ? '16rpx' : '0'
          }"
        >
          <view class="sub-item" v-for="(item, index) in depositDetails" :key="index">
            <view class="sub-item-label">{{ item.label }}</view>
            <view class="sub-item-value">¥{{ item.amount.toFixed(2) }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="bottom-action">
      <button class="pay-btn" @click="onPay">确认支付</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 展开状态管理
const expanded = ref({
  rent: false,
  deposit: false
});

// 子列表高度（用于动画）
const subListHeight = '500rpx';

// 租金明细数据
const rentDetails = ref([
  { label: '2023年10月租金', amount: 3500 },
  { label: '物业费', amount: 300 },
  { label: '水电费', amount: 150.5 }
]);

// 押金明细数据
const depositDetails = ref([
  { label: '房屋押金', amount: 7000 },
  { label: '家具押金', amount: 1000 }
]);

// 计算租金总额
const rentTotal = computed(() => {
  return rentDetails.value.reduce((sum, item) => sum + item.amount, 0);
});

// 计算押金总额
const depositTotal = computed(() => {
  return depositDetails.value.reduce((sum, item) => sum + item.amount, 0);
});

// 计算总金额
const totalAmount = computed(() => {
  return rentTotal.value + depositTotal.value;
});

// 切换展开/收起状态
const toggleExpand = (type) => {
  expanded.value[type] = !expanded.value[type];
};

// 返回上一页
const onBack = () => {
  uni.navigateBack();
};

// 支付操作
const onPay = () => {
  uni.showToast({
    title: '支付功能待实现',
    icon: 'none'
  });
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  padding: 30rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

/* 总金额卡片 */
.total-amount-card {
  background: linear-gradient(135deg, #42b983 0%, #2ecc71 100%);
  margin: 30rpx 24rpx;
  padding: 40rpx 30rpx;
  border-radius: 16rpx;
  color: #fff;
  box-shadow: 0 8rpx 20rpx rgba(66, 185, 131, 0.2);
}

.total-label {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 10rpx;
}

.total-value {
  font-size: 60rpx;
  font-weight: 700;
  margin-bottom: 15rpx;
}

.total-desc {
  font-size: 24rpx;
  opacity: 0.8;
}

/* 明细列表 */
.detail-list {
  margin: 0 24rpx;
}

.detail-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.item-header {
  display: flex;
  align-items: center;
  padding: 30rpx;
  cursor: pointer;
}

.item-title {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.item-icon {
  margin-right: 16rpx;
}

.item-amount {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-right: 16rpx;
}

.expand-icon {
  transition: transform 0.3s ease;
}

/* 子列表样式 */
.sub-list {
  background-color: #fafafa;
  transition: all 0.3s ease;
  overflow: hidden;
}

.sub-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 45rpx;
  border-top: 1px dashed #eee;
}

.sub-item:first-child {
  border-top: none;
}

.sub-item-label {
  font-size: 26rpx;
  color: #666;
}

.sub-item-value {
  font-size: 26rpx;
  color: #333;
}

/* 底部操作按钮 */
.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.pay-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #42b983;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  border: none;
}

.pay-btn::after {
  border: none;
}
</style>
